<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style>
        .red-bg{background: red}
        .green-bg{background: green}
    </style>
</head>
<body>
/
<div id="app">
   <p> {{message}}</p>


    <p v-if="person.age>=18">{{person.name}}是成年人</p>
    <p v-else>{{person.name}}是未成年人</p>

    <p v-show="person.gender='男'">{{person.name}}是男的</p>
    <p v-show="person.gender='女'">{{person.name}}是女的</p>
    <p>姓名:{{person.name}},年龄:{{person.age}},性别:{{person.gender}}</p>
    <p>姓名:<input type="text"v-model="person.name"></p>
    <p>年龄:<input type="text"v-model="person.age"></p>
    <p>性别:<input type="text"v-model="person.gender"></p>
    <table border="1px" v-bind="width">
        <tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
        <tr v-for="per in persons" :class="per.gender=='男'?'red-bg':'green-bg'" v-on:click="showperson(per)">

            <td>{{per.name}}</td>
            <td>{{per.age}}</td>
            <td>{{per.gender}}</td>
        </tr>
    </table>


</div>
<script src="js/vue.min.js"></script>
<script >
    new Vue({
        el:"#app",
        data:{
            message:"hello vue!",
            width:"800px",
            person:{name:"张三",age:18,gender:"男"},
            persons:[{name:"张三",age:18,gender:"女"},{name:"李四",age:18,gender:"男"},{name:"王五",age:18,gender:"男"},{name:"赵六",age:18,gender:"女"}]
        },

        methods:{
            showperson(per){
                alert("姓名:"+per.name,"年龄"+per.age,"性别:"+per.gender)
            }
        },
        created(){
            console.log('created')

        },
        mounted(){
            console.log('mounted')
        },
        updated(){
            console.log('updated')
        },
        unmounted(){
            console.log('unmounted')
        }



    })
</script>
</body>
</html>